<script lang="ts" setup>
import { getExpertList } from '~/api/home'
import {
    ArrowLeft,
    ArrowRight,
} from '@element-plus/icons-vue'
import { decode, encode } from '~/utils/base/dataEncry'
const level = ref(1)
const list = ref<any[]>([])
const queryParams = reactive(
    {
        page: {
            rownumber: 5,
            pageNo: 1,
        },
        condition: [{
            "colName": "dependency",
            "value": "省级",
            "ruleType": "eq"
        }],
        positions: '首页'
    },
)
function getData() {
    getExpertList(queryParams).then((res) => {

        list.value = res.data
    }).catch(() => {
    })
}
onMounted(() => {
    getData()
})
function upper() {
    if (queryParams.page.pageNo != 1) {
        queryParams.page.pageNo--
    }
    getData()
}
function next() {
    queryParams.page.pageNo++
    getData()
}
function selectType(item) {
    level.value = item
    if (item == 1) {
        queryParams.condition[0].value = '省级'
    } else if (item == 2) {
        queryParams.condition[0].value = '市级'
    } else if (item == 3) {
        queryParams.condition[0].value = '区县级'
    }
    getData()
}
function clickItem(item: any) {
    console.log(item.Id)
    getExpertList({
        condition: [{ colName: 'uid', ruleType: 'eq', value: item.uid }],
    }).then((res) => {
        navigateTo({
            path: `/peopleHealth/ExpertListDetail`,
            query: {
                data: encode(res.data[0]),
            },
        })
    })
}
</script>
<template>
    <div
        class="h-140 py-6  bg-#ffffff max-w-1200px mx-auto px-10 border-2 border-solid relative border-#AC8358 rounded-10px p-b-10">
        <div class="w-100% flex justify-between">
            <div class="w-40%">
                <div class="flex  items-end pt-30px">
                    <span class="px-2 font-bold" text="#1D2128 22px">人物库</span>
                    <span class="w-8px h-8px bg-#AC8358 inline-block ml-10px -mt-15px"></span>
                </div>
                <div class=" flex  font-black font-serif -mt-10px" text="#031D2822 26px">
                    EXPERT DATABASE
                </div>
            </div>
            <div class="w-16% pt-40px text-right">
                <div class="m-x-4 m-t-4">
                    <NuxtLink to="/peopleHealth/ExpertList">
                        <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
                    </NuxtLink>
                    <img class="flex-shrink-0 w-25px h-25px inline" src="/img/homeico.png" alt="" />
                </div>
            </div>
        </div>

        <div class="flex py-5 justify-between">
            <div class="pt-5">
                <div text="#1D2128 16px" class="font-sans font-bold pt-2 cursor-pointer"
                    :style="level == 1 ? 'border-bottom:5px solid #AC8358' : 'border-bottom:none'"
                    @click="selectType(1)">省级</div>
                <div text="#1D2128 16px" class="font-sans font-bold pt-2 cursor-pointer"
                    :style="level == 2 ? 'border-bottom:5px solid #AC8358' : 'border-bottom:none'"
                    @click="selectType(2)">市级</div>
                <div text="#1D2128 16px" class="font-sans font-bold pt-2 cursor-pointer"
                    :style="level == 3 ? 'border-bottom:5px solid #AC8358' : 'border-bottom:none'"
                    @click="selectType(3)">区县级</div>
            </div>
            <div class="w-90% flex justify-between cursor-pointer">
                <div class="w-18% relative" v-for="item in list" @click="clickItem(item)">
                    <div class="w-45px rounded-tl-10px rounded-br-10px absolute top-2 left-2 text-center"
                        style="background: linear-gradient(-44deg, rgba(251,165,28,1) -1.24%,rgba(251,165,165,1) 98.64%);color:#fff;font-size: 14px;">
                        {{ item.grade }}
                    </div>
                    <div class="w-100% h-90%">
                        <img class="w-100% h-100% rounded-10px" :src="getImgUrl(item.personal_img)" alt="">
                    </div>
                    <div class="py-10px flex justify-between">
                        <span class="font-bold" text="14px">{{ item.name }}</span>
                        <span
                            style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,#AC8358 89.45%);border-radius: 3px;"
                            text="#fff 14px">{{ item.position }}</span>
                    </div>
                    <div text="#AEAEB2 14px">
                        {{ item.organ_name }}
                    </div>
                </div>
            </div>
        </div>
        <div class="text-right m-t-10 absolute bottom-4 right-4">
            <el-button color="#AC8358" :icon="ArrowLeft" plain @click="upper()"></el-button>
            <el-button color="#AC8358" :icon="ArrowRight" style="color:#fff" @click="next()"></el-button>
        </div>
    </div>
</template>